<template>
	<view style="display: flex;flex-direction: column;align-items: center; height: 100vh;">
		<view style="width: 100%;display: flex; flex-direction: column;align-items: center;">
			<!-- 商品主图 -->
			<swiper 
			:autoplay="true" 
			:interval="3000" 
			:duration="1000" 
			:circular="true"
			style="width: 100%;height: 472rpx;">
				<swiper-item style="width: 100%;height: 100%;"  v-for="(item,index) in data.banner" :key="index">
					<image mode="aspectFill" :src="item" style="width: 100%;height: 100%;"></image>
				</swiper-item>
			</swiper>
			<!-- 商品标题和时间 -->
			<view style="width: 688rpx;margin-top: 29rpx;">
				<text style=" font-size: 28rpx;color: #333333;width: 688rpx;display: -webkit-box;-webkit-box-orient: vertical;-webkit-line-clamp: 2;overflow: hidden;" >
					{{databox.title}}
				</text>
				<text style="font-size: 20rpx;color: #808080;margin-top: 19rpx;">{{databox.gettime}}</text>
			</view>

			<!-- 分割线 -->
			<view style="height: 10rpx;width: 100%;background-color: #F7F8FF;margin-top: 19rpx;"></view>

			<!-- 商品详情 -->
			<view style="margin-top: 30rpx;width: 688rpx; position: relative;">
				<view style="display: flex;align-items: flex-end;">
					<text style="font-size: 30rpx;color: #333333;">商品详情</text>
					<text style="margin-left: 41rpx;font-size: 24rpx;color: #666666;">配置详情</text>
				</view>
				<!-- 配置详情 -->
				<view style="width: 50%;left: 0; top: 52rpx; position: absolute;">
					<view v-for="(item, index) in carType" :key="index" style="display: flex; flex-direction: column;">
						<text style="font-size: 26rpx;color: #808080; line-height: 2;">{{ item.title }}</text>
					</view>
				</view>
				<view  style="position: absolute; right: 0; top: 52rpx;">
					<view style="display: flex; flex-direction: column;">
						<!-- 厂商指导价 -->
						<text style="font-size: 26rpx;color: #333333; line-height: 2;">{{ databox.original_price}}</text>
						<!-- 补贴后售价 -->
						<text style="font-size: 26rpx;color: #333333; line-height: 2;">{{ databox.price}}</text>
						<!-- 定金 -->
						<text style="font-size: 26rpx;color: #333333; line-height: 2;">{{databox.dingjin}}</text>
						<!--  车规 -->
						<text style="font-size: 26rpx;color: #333333; line-height: 2;">{{databox.chegui}}</text>
						<!-- 颜色 -->
						<text style="font-size: 26rpx;color: #333333; line-height: 2;">{{ databox.defaultcolor}}</text>
						<!-- 车源状态 -->
						<text style="font-size: 26rpx;color: #333333; line-height: 2;">{{ databox.cheyuan_status}}</text>
						<!-- 备注 -->
						<text style="font-size: 26rpx;color: #333333; line-height: 2;">{{ databox.remark}}</text>
					</view>
				</view>
			</view>
			<!-- 底部按钮用了浮动，这里做一个等高的空元素，让最下面被遮挡的内容顶上来能看到 -->
			<view style="height: 80rpx;width: 1;"></view>
		</view>

		<!-- 按钮 -->
		<view @click="GO(databox)" 
			style="position: fixed;bottom: 0px; 
		background-color: #4B9EFF;width: 100%;height: 80rpx;line-height: 80rpx;text-align: center;font-size: 28rpx;color: #FFFFFF;"
		>
			立即预约
		</view>
	</view>
</template>

<script>
export default {
	data() {
		return {
			id: '',
			databox:{},
			num:1,
			data:{
				banner:[],
			},
			carType: [
				{
					title: '厂商指导价',
					context: '14.97W'
				},
				{
					title: '补贴后售价',
					context: '6.28W'
				},
				{
					title: '定金',
					context: '6.28W'
				},
				{
					title: '车规',
					context: '中型'
				},
				{
					title: '颜色',
					context: '红色'
				},
				{
					title: '车源状态',
					context: '现车'
				},
				{
					title: '备注',
					context: '现在缴纳定金可以获得9.8折折扣'
				},
			]
		};
	},
	onLoad() {
		this.id = this.$Route.query.id;
		console.log("this.$Route.query.id;: ",this.$Route.query.id);
		this.getCarData();
		let carbox = this.databox;
		console.log("this.databox: ",this.databox);
		console.log("carbox: ",carbox);
		let carboxx = uni.getStorageSync('carbox');
		this.carType[0].title = carboxx.title;
		this.carType[1].title = carboxx.subtitle;
	},
	onHide() {
		uni.removeStorageSync('carbox')
	},
	methods: {
		//获取车辆详情
		GO(i){
			i;
			this.$Router.push({
				name:'placeOrder',
				params:{
					name:i,
					id:this.id
				}
			})
		},
		async getCarData() {
			let res;
			try {
				res = await this.$request.get('addons/shopro/goods/detail', {
					data: {
						id: this.id
					}
				});
				uni.setStorageSync('carbox',res.data.data);
			} catch (e) {
				//TODO handle the exception
				console.log('e===', e);
				return uni.showToast({
					title: '网络连接失败！',
					icon: 'none'
				});
			}
			this.databox = res.data.data;
			console.log("this.databox: ",this.databox);
			this.data.banner = res.data.data.images
		}
	}
};
</script>

<style></style>
